<script setup lang='ts'>
import { useAutoInsurance } from "./hooks/AutoInsurancePricing";
import AutoInsurance from "./components/AutoInsurance.vue"
import { PureTableBar } from "@/components/RePureTableBar";
const {
  seal,
  columns,
  stroage,
  sendDate,
  columns2,
  dataLists1,
  pagination,
  dataList,
  loading,
  InsureList,
  StubimForm,
  SelectData,
  btnloading,
  SeletectData,
  DialogVisible,
  DialogVisibles,
  car_insurance_item,
  StubimMark,
  Close_form,
  ViewDisgen,
  StubimMarks,
  close_forms,
  changeinsurance,
  handleSizeChange,
  handleCurrentChange
} = useAutoInsurance();
</script>

<template>
  <div class="main">
    <!-- 车险定价 -->
    <PureTableBar title="模型列表" class="list_hei">
      <template #buttons>
        <el-button type='primary' @click="DialogVisible = true"> 新建定价 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="600" :columns="columns" :checkList="checkList"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="ViewDisgen(row)" :disabled="row.isSave === 2">
              {{ row.isSave === 0 ? '定价' : '发送定价' }}
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 新建定价 -->
    <ReDialog :width="680" :height="500" :models="DialogVisible" @Closes="Close_form()">
      <template #header>
        <h2 style="text-align: center;">新建定价模型</h2>
      </template>
      <template #main>
        <el-tabs type="border-card">
          <el-tab-pane label="NCD系数">
            <PureTableBar title="" class="list_hei">
              <template #buttons>
                <el-form-item label="模型名称"><el-input v-model.trim="StubimForm.fName" /></el-form-item>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-form-item label="新建时间">
                  <el-date-picker v-model="StubimForm.createTime" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                </el-form-item>
              </template>
              <template v-slot="{ size, checkList }">
                <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
                  :data="dataLists1" max-height="580" :columns="columns2" :checkList="checkList" :header-cell-style="{
                    background: 'var(--el-table-row-hover-bg-color)',
                    color: 'var(--el-text-color-primary)'
                  }">
                  <template #operation="{ row }">
                    <el-button type='primary' size="small" text @click="ViewDisgen(row)"> 定价 </el-button>
                  </template>
                </pure-table>
              </template>
            </PureTableBar>
          </el-tab-pane>
          <el-tab-pane label="自主定价系数">
            <el-form-item label="参数选择" class="selete_lv">
              <el-select placeholder="请选择" v-model="SelectData" multiple collapse-tags value-key="dictId">
                <el-option v-for="(item, k) in SeletectData" :key="k" :label="item.dictName" :value="item" />
              </el-select>
            </el-form-item>
            <AutoInsurance :data="SelectData" />
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <el-button type="primary" @click.stop="StubimMark()" :loading="btnloading"> 确定 </el-button>
        <el-button @click="Close_form()"> 取消 </el-button>
      </template>
    </ReDialog>

    <!-- 定价模型 -->
    <ReDialog :width="680" :height="500" :models="DialogVisibles" @Closes="close_forms()">
      <template #header>
        <h2 style="text-align: center;">XX保险股份有限公司最终车险保费核定表</h2>
      </template>
      <template #main>
        <el-scrollbar height="420px">
          <div class="car_insurance">
            <p class="car_insurance_title">投保信息</p>
            <div class="car_insurance_item">
              <dl class="car_insurance_item_dl">
                <dd>保单号</dd>
                <dd>
                  <el-select class="car_insurance_" size="small" v-model="stroage.PINumber" filterable
                    style="width: 100%;" @change="changeinsurance" value-key="piId">
                    <el-option v-for="item in InsureList" :key="item.piId" :label="item.piNumber" :value="item" />
                  </el-select>
                </dd>
                <!-- <dd>{{ car_insurance_item.piNumber }}</dd> -->
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>保险产品名称</dd>
                <dd :title="car_insurance_item.ppName">{{ car_insurance_item.ppName }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>投保人</dd>
                <dd :title="car_insurance_item.piApplicant">{{ car_insurance_item.piApplicant }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>年龄</dd>
                <dd :title="car_insurance_item.applicantAge">{{ car_insurance_item.applicantAge }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>性别</dd>
                <dd :title="car_insurance_item.applicantSex">{{ car_insurance_item.applicantSex }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>车辆类别</dd>
                <dd :title="car_insurance_item.carType">{{ car_insurance_item.carType }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>车辆用途</dd>
                <dd :title="car_insurance_item.carUse">{{ car_insurance_item.carUse }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>座位数/吨位数</dd>
                <dd :title="car_insurance_item.seatTonnage">{{ car_insurance_item.seatTonnage }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>车辆使用年限</dd>
                <dd :title="car_insurance_item.carUseYear">{{ car_insurance_item.carUseYear }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>新车购置价</dd>
                <dd :title="car_insurance_item.buyCarPrice">{{ car_insurance_item.buyCarPrice }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>出险次数</dd>
                <dd :title="car_insurance_item.count">{{ car_insurance_item.count }}</dd>
              </dl>
              <dl class="car_insurance_item_dl">
                <dd>申请时间</dd>
                <dd :title="car_insurance_item.applyTime">{{ car_insurance_item.applyTime }}</dd>
              </dl>
            </div>
            <p class="car_insurance_title">投保详情</p>
            <el-table :data="car_insurance_item.child" border style="width: 100%">
              <el-table-column type="index" width="50" />
              <el-table-column prop="projectName" label="保障项目" />
              <el-table-column prop="ranges" label="保险范围" />
              <el-table-column prop="pSelect" label="保额选项（元）" />
              <el-table-column prop="premium" label="基础保费（元）" />
            </el-table>
            <div class="price_bottom">
              <dl class="price_bottom_des">
                <dd>合计</dd>
                <dd>{{ car_insurance_item.foundAmount }}</dd>
              </dl>
              <div class="FLTZ__des">
                <dl>
                  <dd></dd>
                  <dd>费率调整系数</dd>
                  <dd></dd>
                </dl>
                <dl>
                  <dd>NCD系数</dd>
                  <dd>交通违法系数</dd>
                  <dd>自主定价系数</dd>
                </dl>
                <dl>
                  <dd>{{ car_insurance_item.ncdCoef }}</dd>
                  <dd>1.0</dd>
                  <dd>{{ car_insurance_item.actCoef }}</dd>
                </dl>
              </div>
              <div class="FLTZ__tips">
                <dl>
                  <dt>最终车险保费：{{ car_insurance_item.finalPrice }}元</dt>
                  <dd>注：车险保费=基础保费*费率调整系数=基础保费*NCD系数*交通违法系数*自主定价系数。</dd>
                </dl>
              </div>
              <dl class="stubim_msg">
                <dd>承保保险公司:
                  <span id="seal">
                    <img v-if="seal" src="@/assets/studen/images/seal01.png" />
                    <span @click="seal = 1" v-else="seal">盖章</span>
                  </span>
                </dd>
                <dd>发送时间:
                  <el-date-picker v-model="sendDate" style="width:180px" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                </dd>
              </dl>
            </div>
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <el-button type="primary" @click="StubimMarks()" :loading="btnloading"> 确定 </el-button>
        <el-button @click="close_forms()"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.selete_lv {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: 10px;
}

.car_insurance_title {
  background: #ccc;
  line-height: 32px;
  text-align: left;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.car_insurance_item {
  display: flex;
  flex-wrap: wrap;

  .car_insurance_item_dl {
    width: 50%;
    display: flex;
    align-items: center;


    dd {
      &:nth-child(1) {
        width: 45%;
        border: 1px solid #ccc;
        font-size: 14px;
        font-weight: bold;
      }

      &:nth-child(2) {
        width: 55%;
        border: 1px solid #ccc;
        text-align: left;
        line-height: 22px;
        height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

    }
  }
}

.price_bottom {

  .price_bottom_des {
    display: flex;
    align-items: center;
    line-height: 32px;

    dd {
      &:nth-child(1) {
        width: 76.8%;
        text-align: right;
        border-right: 1px solid #ebeef5;
        padding-right: 15px;
      }

      &:nth-child(2) {
        text-align: center;
        padding-left: 10px;
        // width: 20%;
      }
    }
  }

  .stubim_msg {
    border-top: 1px solid #ebeef5;
    font-size: 14px;

    #seal {
      cursor: pointer;
      color: red;
      position: relative;

      img {
        position: absolute;
        width: 150px;
        max-width: 150px;
        height: 150px;
        right: -25px;
        top: -54px;
        z-index: 10;
      }
    }

    dd {

      line-height: 32px;
      width: 90%;
      text-align: right;
    }
  }

}

.FLTZ__des {
  width: 100%;
  display: flex;
  align-items: center;

  dl {
    width: 33%;

    dd {
      border: 1px solid #ccc;
      line-height: 28px;
      height: 32px;
      font-size: 14px;
      text-align: center;
    }

    &:nth-child(1) {
      border: 1px solid #ccc;
      font-weight: bold;

      dd {
        border: none;
      }
    }
  }
}

.FLTZ__tips {
  text-align: right;
  padding-right: 10px;

  dt {
    font-weight: bold;
  }

  dt,
  dl {
    line-height: 28px;
    font-size: 14px;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
